import React, { useState } from 'react'
import { DatePicker, Button, Select, Form, Input } from 'antd'
import style from '../othercompon.module.css';
const { RangePicker } = DatePicker;
const { Option } = Select;




function OtherCompon(props) {
  const [keyValue, setkeyValue] = useState('')
  const [formObj, setFormObj] = useState({
    startDate: "",
    endDate: "",
    salesman: "",
    aciton: "",
    systemHandle: ""
  })
  const [rilibtn, setrilibtn] = useState([])


  // onChange事件
  function onChange(data, datastring) {
    // console.log(datastring)
    // setrilibtn(datastring)
    setFormObj(Object.assign({}, formObj, { startDate: datastring[0] }, { endDate: datastring[1] }))
  }

  // 在输入框中获取到选中的值
  function handleChange(value) {
    return (id) => {
      console.log(id)
      if (id === '1') {
        setFormObj(Object.assign({}, formObj, { salesman: value }))
      } else if (id === '2') {
        setFormObj(Object.assign({}, formObj, { aciton: value }))
      } else {
        setFormObj(Object.assign({}, formObj, { systemHandle: value }))
      }
    }
  }

  // 搜索点击事件，获取到日历事件并向后端返回
  const onWorkSearchClick = () => {
    console.log(rilibtn)
    console.log(formObj)


  }
  // 清除点击事件，
  const resetDate = () => {
    setkeyValue(new Date())

  }

  // const defvalus = () => {
  //   console.log(state)
  //   return state
  // }

  const selectList = [{
    seles_id: '1',
    seles_title: '请选择',
    seles_name: '业务员',
    seles_list: [{
      list_ids: 'a',
      list_title: '超级管理员',
    }, {
      list_ids: 'b',
      list_title: '管理员'
    }]
  }, {
    seles_id: '2',
    seles_name: '行为',
    seles_title: '请选择',
    seles_list: [{
      list_ids: 'c',
      list_title: '新增',
    }, {
      list_ids: 'd',
      list_title: '删除'
    }, {
      list_ids: 'e',
      list_title: '修改'
    }, {
      list_ids: 's',
      list_title: '修改'
    }]
  }, {
    seles_id: '3',
    seles_name: '系统操作',
    seles_list: [{
      list_ids: 'f',
      list_title: '显示',
    }, {
      list_ids: 'g',
      list_title: '不显示'
    }]
  }]

  return (
    <Form>
      <RangePicker key={keyValue} onChange={onChange} />
      {
        selectList.map(item => {
          return (
            <div key={item.seles_id} style={{ display: 'inline-block' }}>
              <span className={style.spanStyles} >{item.seles_name}:</span>
              <Select defaultValue={item.seles_title} style={{ width: 120 }} onChange={(value) => { handleChange(value)(item.seles_id) }} >
                {
                  item.seles_list.map(items => {
                    return <Option key={items.list_ids} value={items.list_title}>{items.list_title}</Option>
                  })
                }
              </Select>
            </div>
          )
        })
      }

      <Button type="primary" onClick={onWorkSearchClick} className={style.seachBtn}>
        查询
      </Button>
      <Button type="default" onClick={resetDate} className={style.seachBtn}>
        重置
      </Button>
    </Form>




  )
}
export default OtherCompon
